<!-- 页面HTML -->
<template>
	<!-- 必须只有一个根组件 -->
	<view>
		<!-- 文本容器 -->
		<text>{{msg}}</text>
		<!-- 按钮组件 -->
		<button 
			type="primary"
			@click="msg=msg+1"
		>按钮</button>
		<button 
			type="warn"
			@click="handleClick"
		>按钮</button>
		<button 
			type="primary" 
			size="mini"
			@click="isShow=true"
		>显示</button>
		<button 
			type="warn" 
			size="mini"
			@click="isShow=false"
		>隐藏</button>
		<button
			type="primary" 
			size="mini"
			@click="isShow=!isShow"
		>切换</button>
		<button 
			type="warn"
			@click="size=size+5"
		>变大</button>
		<!-- 样式绑定 -->
		<view 
			class="box"
			v-show="isShow"
			:style="{width: size+'px'}"
		></view>
	</view>
</template>
<!-- 页面JS -->
<script>
	export default {
		data() {
			return {
				msg: 0,
				isShow: false,
				// 用于控制宽高
				size: 150
			}
		},
		onLoad() {

		},
		methods: {
			// 定义函数，点击以后会调用
			handleClick() {
				// 要访问数据的话，需要添加this
				this.msg = this.msg-1
			}
		}
	}
</script>
<!-- 页面CSS 
	lang 设置CSS预处理器
	scoped  里边的css只能在当前页面下生效
-->
<style lang="scss" scoped>
	.box {
		width: 150px;
		height: 150px;
		background-color: pink;
	}
</style>
